<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="./js/echarts/echarts.5.0.0.js"></script>
    <script src="./js/echarts/theme/shine.js"></script>
    <title>ECharts多个坐标案例</title>
</head>
<style>
    #chart {
        width: 800px;
        height: 400px;
        display: inline-block;
    }
</style>
<body>
<div id="chart"></div>
</body>
<script>
    echarts.init(document.getElementById('chart')).setOption({
        title: {
            text: 'ECharts多个坐标案例'
        },
        // 多个直角坐标
        grid: [
            {
                top: 40,
                bottom: '58%'
            },
            {
                top: '58%',
                bottom: '40'
            },
        ],
        xAxis: [
            {
                type: 'category',
                gridIndex: 0
            },
            {
                type: 'category',
                gridIndex: 1
            }
        ],
        // gridIndex 需要和xAxis对应
        yAxis: [
            {
                gridIndex: 0
            },
            {
                gridIndex: 1
            },
        ],
        dataset: {
            source: [
                ['', '2012', '2013', '2014', '2015'], // x 轴的描述
                ['', 41.1, 30.4, 65.1, 53.3],
                ['', 86.5, 92.1, 85.7, 183.1]
            ]
        },
        series: [{
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            seriesLayoutBy: 'row', // 行读取 从source 索引1开始

        }, {
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            seriesLayoutBy: 'row',
        }]
    });
</script>
</html>
